<template>  
    <div>  
      <input type="text" v-model="studentId" placeholder="请输入学号" @input="findStudent" />  
      <div v-if="student">  
        <h2>学生信息</h2>  
        <p>学号：{{ student.id }}</p>  
        <p>姓名：{{ student.name }}</p>  
        <p>年龄：{{ student.age }}</p>  
        <p>专业：{{ student.major }}</p>  
      </div>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    data() {  
      return {  
        studentId: '',  
        student: null, // 用于存储查找到的学生信息  
        students: [ // 假设的学生信息列表  
          { id: '123456', name: '小明', age: 18, major: '计算机科学与技术' },  
          // ... 其他学生信息  
        ],  
      };  
    },  
    methods: {  
      findStudent() {  
        // 在学生列表中查找对应的学号  
        this.student = this.students.find(student => student.id === this.studentId);  
      },  
    },  
    // 监听studentId的变化（可选，但在这里直接使用@input已经足够）  
    watch: {  
      studentId(newVal) {  
        if (newVal) {  
          this.findStudent();  
        }  
      },  
    },  
  };  
  </script>  
    
  <style scoped>  

  </style>